<template>
  <div class="app-container">
    <el-container>
      <el-header style="height: 80px;">
        <el-form :inline="true" style="padding-top: 20px;">
          <el-form-item label="车型类型:" label-width="100px">
            <el-select v-model="queryparams.truckTypeId" clearable placeholder="请选择" style="width:420px">
              <el-option
                v-for="item in searchoptions"
                :key="item.truckTypeId"
                :label="item.truckTypeName"
                :value="item.truckTypeId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="车牌号码:" label-width="100px">
            <el-input v-model="queryparams.licensePlate" placeholder="请输入车牌号码" style="width:300px" />
          </el-form-item>
          <el-button type="danger" style="width:100px" @click="seach">搜索</el-button>
          <el-button type="danger" style="width:100px" plain @click="reset">重置</el-button>
        </el-form>
      </el-header>
      <el-main style="height: 80px;">
        <el-button class="button" type="text" style="width: 100px;height: 50px;" @click="allList">全部{{ parseInt(arr[0])+parseInt(arr[1]) }}</el-button>
        <el-button class="button" type="text" style="width: 100px;height: 50px;" @click="user">可用{{ arr[1] }}</el-button>
        <el-button class="button" type="text" style="width: 100px;height: 50px;" @click="carstop">停用{{ arr[0] }}</el-button>
      </el-main>
      <el-footer style="height:100%">
        <el-button type="danger" style="width:100px" @click="addcar">新增车辆</el-button>
        <el-table
          :data="list"
          stripe
          style="width: 100%"
        >
          <el-table-column
            prop="date"
            label="序号"
            width="80"
          >
            <template v-slot="{$index}">
              {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            prop="licensePlate"
            label="车牌号码"
            width="150"
          />
          <el-table-column
            prop="truckTypeName"
            label="车辆类型"
            width="150"
          />
          <el-table-column
            prop="driverNum"
            label="司机数量"
            width="100"
          />
          <el-table-column
            prop="workStatus"
            label="车辆状态"
            width="100"
          >
            <template v-slot="{ row }">
              <span v-if="row.workStatus===0" class="roteback">停用</span>
              <span v-else class="rote">启用</span>
            </template>
          </el-table-column>>
          <el-table-column
            prop="deviceGpsId"
            label="GPS设备ID"
            width="180"
          />
          <el-table-column
            prop="allowableLoad"
            label="实载重量(T)"
            width="100"
          />
          <el-table-column
            prop="allowableVolume"
            label="实载体积(方)"
            width="100"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="200"
          >
            <template v-slot="{row}">
              <el-button type="text" size="small" @click="$router.push({path:'/car/detail',query:{id:row.id}})">查看详情</el-button>
              <el-button v-if="row.workStatus===0" type="text" size="small" @click="active">启用</el-button>
              <el-button v-else type="text" size="small" @click="stop">停用</el-button>
              <el-button type="text" size="small" @click="driver(row)">配置司机</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-footer>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          :current-page="queryparams.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="queryparams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="queryparams.counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-container>
    <!-- 放置一个弹层 用来编辑新增车型 -->
    <el-dialog :title="'新增车辆'" :visible.sync="isvisible" custom-class="customclass">
      <!-- 表单 -->
      <el-form ref="form" label-width="100px" :model="form" :rules="rules">
        <el-form-item label="车辆类型" prop="truckTypeName">
          <el-select v-model="form.truckTypeName" clearable placeholder="请选择" style="width:420px">
            <el-option
              v-for="item in options"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号码" prop="licensePlate">
          <el-input v-model="form.licensePlate" style="width:420px" placeholder="请输入车牌号码" />
        </el-form-item>
        <el-form-item label="GPS设备ID" prop="deviceGpsId">
          <el-input v-model="form.deviceGpsId" style="width:420px" placeholder="请输入GPS设备ID" />
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
          <el-button size="small" @click="close">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 点击停用 弹出弹框 -->
    <el-dialog :title="'停用车辆'" :visible.sync="flag" custom-class="customclass1">
      <div style="margin-bottom: 10px;">确定要停用吗？车辆停用需满足以下条件：</div><br>
      <span style="margin-bottom: 10px;display: inline-block;"> 1.车辆当前无运输任务</span>&nbsp;&nbsp;
      <span style="margin-bottom: 10px;display: inline-block;"> 2.车辆无关联运输线路 </span>
      <div style="color: darkgoldenrod;">注：停用后司机将自动接触绑定</div>
      <el-row slot="footer">
        <el-button size="small" type="primary" @click="btnSure">确定</el-button>
        <el-button size="small" @click="btnClose">取消</el-button>
      </el-row>
    </el-dialog>
    <!-- 点击配置司机弹框 -->
    <el-dialog title="车辆配置" :visible.sync="isflag" custom-class="customclass2">
      <div style="margin-bottom: 20px;">配置司机需满足以下条件：</div>
      <span style="margin-bottom: 20px;display: inline-block;">1.车辆信息已完善</span>&nbsp;&nbsp;
      <span style="margin-bottom: 20px;display: inline-block;">2.车辆无未完成运输任务</span>
      <el-dialog
        width="45%"
        title="配置司机"
        :visible.sync="innerflag"
        append-to-body
      >
        <div>车牌号：{{ driverform.licensePlate }}</div>
        <div>车型：{{ driverform.truckTypeName }}</div>
        <div>车辆状态：{{ driverform.workStatus }}</div>
        <div>实载重量：{{ driverform.allowableLoad }}</div>
        <div>实载体积：{{ driverform.allowableVolume }}</div>
        <el-form style="margin-top: 30px;">
          <el-form-item label="配置司机：">
            <el-input placeholder="请输入司机名称" style="width: 300px;" />
          </el-form-item>
        </el-form>
        <el-table
          :data="driverlist"
          style="width: 100%"
        >
          <el-table-column
            prop="index"
            label="序号"
            width="180"
          />
          <el-table-column
            prop="name"
            label="司机名称"
            width="180"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="100"
          >
            <template>
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row slot="footer" type="flex" justify="center">
          <el-col :span="6">
            <el-button size="small" type="primary" @click="OK">确定</el-button>
            <el-button size="small" @click="innerflag=false">取消</el-button>
          </el-col>
        </el-row>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isflag = false">取 消</el-button>
        <el-button type="primary" @click="sure">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { carmanagerpage, getcarManagement, addcar, countcars } from '@/api/car'
export default {
  data() {
    return {
      driverform: {
        licensePlate: '',
        truckTypeName: '',
        workStatus: '',
        allowableLoad: '',
        allowableVolume: ''
      },
      dirve: [],
      count: '',
      Truck: {
        page: 1,
        pageSize: 10,
        workStatus: '1'
      },
      Trucker: {
        page: 1,
        pageSize: 10,
        workStatus: '0'
      },
      res: [],
      driverlist: [],
      arr: [],
      isflag: false,
      innerflag: false,
      flag: false,
      editableTabsValue: '2',
      editableTabs: [{
        title: '全部',
        name: '0'
      }, {
        title: '可用',
        name: '1'
      }, {
        title: '停用',
        name: '2'
      }],
      tabIndex: 2,
      options: [],
      idlist: [],
      isvisible: false,
      list: [],
      // 存储查询参数
      queryparams: {
        page: 1,
        pageSize: 10,
        truckTypeName: []
      },
      counts: null,
      total: 0,
      form: {
        truckTypeId: '',
        licensePlate: '',
        deviceGpsId: '',
        truckTypeName: ''
      },
      rules: {
        truckTypeName: [
          { required: true, message: '车辆类型不能为空', trigger: 'blur' }
        ],
        licensePlate: [
          { required: true, message: '车辆类型不能为空', trigger: 'blur' },
          { pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/, message: '请输入正确格式的车牌号', trigger: 'blur' }
        ],
        deviceGpsId: [
          { required: true, message: '车辆类型不能为空', trigger: 'blur' }
        ]
      },
      // select 的options
      searchoptions: []
    }
  },
  created() {
    this.carmanagerpage()
    this.getcarManagement()
    this.getcarManagement1()
    this.countcars()
  },
  methods: {
    async carmanagerpage() {
      const res = await carmanagerpage(this.queryparams)
      this.list = res.items
      this.queryparams.counts = Number(res.counts)
    },
    // 分页
    handleSizeChange(pageSize) {
      this.queryparams.pageSize = pageSize
      this.carmanagerpage()
    },
    handleCurrentChange(page) {
      this.queryparams.page = page
      this.carmanagerpage()
    },
    // 添加车辆
    async addcar() {
      this.isvisible = true
    },
    async btnOK() {
      try {
        const msg = await this.$refs.form.validate()
        if (msg) {
          const arr = this.idlist.filter(item => item.name === this.form.truckTypeName)
          this.form.truckTypeId = arr[0].id
          addcar({
            truckTypeId: this.form.truckTypeId,
            licensePlate: this.form.licensePlate,
            deviceGpsId: this.form.deviceGpsId
          })
          this.carmanagerpage()
          this.$message.success('新增车辆成功')
          this.isvisible = false
        }
      } catch (error) {
        this.$message.error('*号为必填项！')
      }
    },
    // 取消按钮
    close() {
      this.isvisible = false
      this.$refs.form.resetFields()
    },
    async getcarManagement() {
      const d = await getcarManagement()
      this.options = d.map(item => item.name)
      this.idlist = d
    },
    // 获取搜索下拉框的options
    async getcarManagement1() {
      const msg = await getcarManagement()
      this.searchoptions = msg.map(item => {
        return {
          truckTypeId: item.id,
          truckTypeName: item.name
        }
      })
    },
    // 搜索
    async seach() {
      this.queryparams.page = 1
      this.queryparams.pageSize = 10
      await this.carmanagerpage()
    },
    // 重置
    reset() {
      this.queryparams = {
        page: 1,
        pageSize: 10,
        truckTypeName: []
      }
      this.carmanagerpage()
    },
    // 启用弹框
    active() {
      this.$confirm('确定要启用吗？车辆启用需满足一下条件：\n\n 1.车辆信息已完善  2.绑定司机>=2,且有排班', '车辆启用', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        this.$message({
          type: 'error',
          message: '车辆行驶证不存在'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 停用弹框
    stop() {
      this.flag = true
    },
    btnSure() {
      this.flag = false
      this.$message.error('存在未完成运输任务，不能解除')
    },
    btnClose() {
      this.flag = false
      this.$message.info('已取消')
    },
    // 点击配置司机弹框
    driver(row) {
      this.driverform = row
      this.isflag = true
    },
    sure() {
      this.innerflag = true
      this.isflag = false
    },
    OK() {
      this.innerflag = false
    },
    // 点击全部 调取全部事件
    async allList() {
      this.reset()
      await this.carmanagerpage()
    },
    // 可用@click Workstatus = 1 可用
    async user() {
      const res = await carmanagerpage(this.Truck)
      this.list = res.items
      this.queryparams.counts = Number(res.counts)
      this.queryparams.workStatus = 1
    },
    // 停用@click Workstatus = 0 停用
    async carstop() {
      const d = await carmanagerpage(this.Trucker)
      this.list = d.items
      this.queryparams.counts = Number(d.counts)
      this.queryparams.workStatus = 0
    },
    // 统计车辆
    async countcars() {
      this.arr = await countcars()
    }
  }
}
</script>

<style>
.block{
  display: flex;
  justify-content: center;
}

.highlight {
    background-color: rgb(255, 94, 0);
  }

  .button:hover {
    background-color: lightgray;
  }
.rote:before {
  width: 6px;
  height: 6px;
  background: green;
  border-radius: 50%;
  content: "";
  display: inline-block;
  margin-right: 6px;
}
.roteback:before {
  width: 6px;
  height: 6px;
  background: red;
  border-radius: 50%;
  content: "";
  display: inline-block;
  margin-right: 6px;
}
.el-header, .el-footer {
    background-color: #fff;
    color: #333;
  }

  .el-main {
    background-color: #fff;
    color: #333;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .customclass{
  width: 600px!important;
}

.customclass1{
  width: 400px!important;
}

.customclass2{
  width: 400px!important;
}
</style>
